import { Col, Form, Icon, Modal, Row } from 'antd';
import React from 'react';
import { FormComponentProps } from 'antd/es/form';
import {
  getFieldDefines,
  getFormInputByField,
} from '@/components/hyperspace/modules/StandardModule/utils';
import { Field } from '@/dictionary/index.d';

const FormItem = Form.Item;

interface CreateFormProps extends FormComponentProps {
  visible: boolean; // 是否显示
  title?: string; // 标题
  config: any; // 配置项
  formItemOptions: {}; // 表单项验证
  onSubmit: (values: any) => void; // 提交事件
  onCancel: () => void; // 取消事件
  dictionary: Field[]; // 字典定义
}

const CreateForm: React.FC<CreateFormProps> = props => {
  const { form, visible, config, onSubmit, onCancel, formItemOptions, dictionary } = props;
  const { getFieldDecorator, validateFields } = form;
  const { fields } = config.add;
  const width = config.add.width ? config.add.width : 680;
  const title = config.add.title ? config.add.title : '新增';

  const handleFormReset = () => {
    form.resetFields();
    onCancel();
  };

  const handleSubmit = (e: any) => {
    e.preventDefault();
    validateFields((err, values) => {
      if (!err) {
        onSubmit(values);
      }
    });
  };

  const fieldDefines: Field[] = getFieldDefines(fields, dictionary);

  return (
    <Modal
      width={width}
      visible={visible}
      title={title}
      onCancel={handleFormReset}
      onOk={handleSubmit}
      destroyOnClose={true}
    >
      <Form>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          {(() => {
            const contents = [];
            // eslint-disable-next-line no-plusplus
            for (let i = 0; i < fieldDefines.length; i++) {
              const field: Field = fieldDefines[i];

              // eslint-disable-next-line max-len
              if (config.common && config.common.fieldGroup) {
                const groups = config.common.fieldGroup.edit;

                // eslint-disable-next-line no-restricted-syntax
                for (const group of groups) {
                  if (group.before === field.name) {
                    const content = (
                      <Col md={24} sm={24} style={{ paddingBottom: 10 }}>
                        <span style={{ fontWeight: 'bold', fontSize: 16 }}>
                          <Icon type="tag" theme="twoTone" /> {group.groupName}
                        </span>
                      </Col>
                    );

                    contents.push(content);
                  }
                }
              }

              let showOptions = {
                md: 12,
                sm: 24,
              };

              let options = {};
              if (formItemOptions) {
                options = formItemOptions[field.name] ? formItemOptions[field.name] : {};
                // @ts-ignore
                if (options.showOptions) {
                  // @ts-ignore
                  // eslint-disable-next-line prefer-destructuring
                  showOptions = options.showOptions;
                }
              }

              const content = (
                <Col md={showOptions.md} sm={showOptions.sm} key={field.name}>
                  <FormItem label={field.desc}>
                    {getFieldDecorator(field.name, options)(getFormInputByField(field))}
                  </FormItem>
                </Col>
              );
              contents.push(content);
            }

            return contents;
          })()}
        </Row>
      </Form>
    </Modal>
  );
};

export default Form.create<CreateFormProps>()(CreateForm);
